<template>
    <div>
        <!-- 头部位置 -->
        <div class="city-header">
            <div class="go-back" @click="goBack()">
                <img src="<" alt="" />
                <div class="title">请选择观影城市</div>
            </div>
            <van-search v-model="searchCity" show-action placeholder="请输入搜索关键词" background="#f1f1f1"
                @change="chooseCity(searchCity)" />
        </div>
        <div class="point">
            <h2>GPS定位你所在城市</h2>
            <div class="onecity" @click="chooseCity('广州')">{{ myLocation }}</div>
        </div>
        <div class="hotcity">
            <h2>热门城市</h2>
            <div class="hcity">
                <div class="onecity" @click="chooseCity('北京')">北京</div>
                <div class="onecity" @click="chooseCity('深圳')">深圳</div>
                <div class="onecity" @click="chooseCity('广州')">广州</div>
                <div class="onecity" @click="chooseCity('上海')">上海</div>
            </div>
        </div>
        <!-- 城市信息 -->
        <div class="clist">
            <van-index-bar :index-list="indexList" highlight-color="#ff0000">
                <div v-for="item in dataList" :key="item.index">
                    <van-index-anchor :index="item.index" style="background:#ccc"></van-index-anchor>
                    <van-cell v-for="(sub, key) in item.data" :title="sub.name" :key="sub.name + key"
                        @click="chooseCity(sub.name)" />
                </div>
            </van-index-bar>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { cityListData } from "@/api/api";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 城市列表的索引
const indexList = ref<string[]>([]);
// 城市列表的内容
const dataList = ref<{ index: string; data: { name: string; cityId: number }[] }[]>([]);
// 当前城市信息
const myLocation = ref("地址获取中...");
// 搜索城市信息
const searchCity = ref("");
(async () => {
    let res = await cityListData();
    // console.log(res);
    dataList.value = res[0];
    indexList.value = res[1];
})();
// 跳转到上一个路由
let goBack = () => {
    console.log("back");
    router.back();
}
// 选择一个地址跳转到指定城市列表
const chooseCity = (city: string) => {
    // 初始化城市地址为 深圳 440300
    let cityId = 0
    // 在城市列表中匹配到对应的城市 ID
    dataList.value.forEach(item => {
        item.data.forEach(one => {
            if (one.name === city) {
                cityId = one.cityId
            }
        })
    })
    if (cityId === 0) {
        cityId = 440300;
        city = "深圳"
    }
    router.push("/cinema/" + cityId + "/" + city)
}
</script>

<style scoped lang='scss'>
.city-header {
    .go-back {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        img {
            width: 30px;
            padding: 0 5px;
        }
        .title {
            margin-right: 10px;
            font-size: 15px;
            color: #888;
        }
    }
}
.point,
.hotcity {
    margin: 20px 20px 20px;

    h2 {
        font-size: 13px;
        color: #797d82;
        margin-bottom: 10px;
        font-weight: normal;
    }
    .onecity {
        height: 30px;
        background-color: #f4f4f4;
        line-height: 30px;
        border-radius: 3px;
        box-sizing: border-box;
        font-size: 14px;
        color: #191a1b;
        display: inline-block;
        padding: 0 10px;
        margin-right: 20px;
    }
}
</style>